<template>
  <div>
    <a-row>
      <a-col :span="6">col-6</a-col>
      <a-col :span="6">col-6</a-col>
      <a-col :span="6">col-6</a-col>
      <a-col :span="6">col-6</a-col>
    </a-row>
    <a-divider orientation="left">Horizontal</a-divider>
    <a-row :gutter="16">
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
    </a-row>
    <a-divider orientation="left">Responsive</a-divider>
    <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
      <a-col
        class="gutter-row"
        :span="6"
        :offset="8"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
    </a-row>
    <a-divider orientation="left">Responsive</a-divider>

    <a-row :gutter="[160, 28]">
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col
        class="gutter-row"
        :span="6"
      >
        <div class="gutter-box">col-6</div>
      </a-col>
    </a-row>

    <a-row>
      <a-col
        :span="18"
        :push="6"
      >1</a-col>
      <a-col
        :span="6"
        :pull="18"
      >2</a-col>
    </a-row>

    <a-divider orientation="left">sub-element align left</a-divider>
    <div id="components-grid-demo-flex-align">

      <a-row
        justify="space-between"
        align="middle"
        style="height: 50px;background-color: red;"
      >
        <a-col :span="4">col-4</a-col>
        <a-col :span="4">col-4</a-col>
        <a-col :span="4">col-4</a-col>
        <a-col :span="4">col-4</a-col>
      </a-row>
    </div>

    <a-row>
      <a-col
        :span="6"
        :order="4"
      >1 col-order-4</a-col>
      <a-col
        :span="6"
        :order="3"
      >2 col-order-3</a-col>
      <a-col
        :span="6"
        :order="2"
      >3 col-order-2</a-col>
      <a-col
        :span="6"
        :order="1"
      >4 col-order-1</a-col>
    </a-row>
    <a-row>
      <a-col :flex="2">2 / 5</a-col>
      <a-col :flex="3">3 / 5</a-col>
    </a-row>
    <a-row>
      <a-col
        :xs="2"
        :sm="4"
        :md="6"
        :lg="8"
        :xl="10"
      >Col</a-col>
      <a-col
        :xs="20"
        :sm="16"
        :md="12"
        :lg="8"
        :xl="4"
      >Col</a-col>
      <a-col
        :xs="2"
        :sm="4"
        :md="6"
        :lg="8"
        :xl="10"
      >Col</a-col>
    </a-row>
    <a-row>
      <a-col
        :xs="{ span: 5, offset: 1 }"
        :lg="{ span: 6, offset: 2 }"
      >Col</a-col>
      <a-col
        :xs="{ span: 11, offset: 1 }"
        :lg="{ span: 6, offset: 2 }"
      >Col</a-col>
      <a-col
        :xs="{ span: 5, offset: 1 }"
        :lg="{ span: 6, offset: 2 }"
      >Col</a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {

    }
  },
  created() { },
  mounted() {
  },
  methods: {
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
// .ant-col {
//   border: 1px solid blue;
// }
.gutter-box {
  background: #0092ff;
  padding: 8px 0;
}
:deep(#components-grid-demo-flex) [class~="ant-row"] {
  background: rgba(128, 128, 128, 0.08);
}
:deep(#components-grid-demo-flex-align) [class~="ant-row"] {
  background: rgba(128, 128, 128, 0.08);
}
</style>
